<template>
    <div class="default-main2 ba-table-box" style="margin-top: 10px;">
        <el-card style="width:98%;float: left;margin-left: 1%;min-height: 89vh;">
             
            <el-row :gutter="20">
                    <el-col :sm="12" :lg="3">
                        <div class="small-panel user-reg suspension">
                            <div class="small-panel-content">
                                <div class="content-left">
                                    <Icon color="#9933FF" size="20" name="fa fa-shopping-cart" />
                                    <span id="user_reg_number" style="color:#9933FF">{{ tong.order_sum??0 }}</span>
                                    <div class="content-right">订单数量</div>
                                </div>

                            </div>
                        </div>
                    </el-col>
            </el-row>

        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref, provide,onMounted,nextTick} from 'vue'
import baTableClass from '/@/utils/baTable'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { useI18n } from 'vue-i18n'
import * as echarts from 'echarts'
import createAxios from "/@/utils/axios";
defineOptions({
    name: 'statics/rank',
})
//
const { t } = useI18n()
const data = ref([])
const tong = ref([])
onMounted(() => {

    return createAxios({
        url: '/admin/order.Order/getOrderStatics',
        method: 'get',
    }).then(res => {
        nextTick(() => {
           
        })
    }).catch(err => {

    })


})



</script>

<style scoped lang="scss">
.table{
     border:1px solid #eee;
     width: 100%;
     border-collapse: collapse; /* 合并边框，消除间隙 */
}
.table th{
    border: 1px solid #eee;
    padding: 10px;
    text-align: left;
}
.table td{
    border: 1px solid #eee;
    padding: 10px;
}
.table tr .bg{
    background-color: #f5f7fa;
    font-weight: bold;
    text-align: justify;
}
.table tr .tc{
    text-align: center;
}
.table tr .yuan{
    background-color: #ccc;
    width: 22px ;
    height: 22px;
    display: block;
    text-align: center;
    border-radius: 100%;
    color:#fff;
    font-size: 11px;
    line-height: 22px;
    margin: 0 auto;
}
.table tr .yuan0{
    background-color: #99CC33;
}
.table tr .yuan1{
    background-color: #FF6666;
}
.table tr .yuan2{
    background-color: #FF9900;
}
.small-panel {
    // background-color: #e9edf2;
    background-color: #f4f4f4;
    border-radius: var(--el-border-radius-base);
    padding:10px;
    margin-bottom: 20px;

    .small-panel-title {
        color: #92969a;
        font-size: 15px;
    }

    .small-panel-content {
        display: flex;
        align-items: flex-end;
        margin-top: 0px;
        color: #2c3f5d;

        .content-left {
            font-size: 20px;

            .icon {
                margin-right: 10px;
            }

            span {
                display: inline-block;
                font-size: 18px;
            }
            b{
                font-size: 10px;
            }
        }

        .content-right {
            font-size: 14px;
            margin-left: auto;
        }

        .color-success {
            color: var(--el-color-success);
        }

        .color-warning {
            color: var(--el-color-warning);
        }

        .color-danger {
            color: var(--el-color-danger);
        }

        .color-info {
            color: var(--el-text-color-secondary);
        }
    }
}
</style>
